<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
         <link rel="stylesheet" type="text/css" href="kancai.css">

        <title></title>

       
        
        <script type="text/javascript">
            window.onload = function(){

               var oDiv1 = document.getElementById('Layer1');
              var oDiv2 = document.getElementById('Layer2');
              oDiv1.onclick = function () {
            oDiv2.style.display = oDiv2.style.display == 'block' ? 'none' : 'block';
        }
                var btns = document.getElementsByClassName ("lili");
                var divs = document.getElementById("dd").getElementsByTagName("div");
               
                

                for (var i=0;i<btns.length;i++) {
                    // 给每一个button添加一个属性index  
                    btns[i].index=i;
                    btns[i].onclick = function(){
                        for (var j= 0;j<btns.length;j++) {
                            btns[j].id="";
                            divs[j].id="";

                            oDiv2.style.display = 'none';

                        }
                        this.id = "gold";
                       
                        divs[this.index].id="show";
                    }

                }
            }
        </script>
    </head>
    <body>
        <div class="wrap">
    <ul class="box">
        <li><div class="box1 box2"><img src="gg1.jpg" style="width: 100% ;height: 200px;" alt="maidanglao" title="maidanglao"></div></li>
        <li><div class="box1 box3"><img src="gg2.jpg" style="width: 100%; height: 200px;" alt="maidanglao" title="maidanglao"></div></li>
        <li><div class="box1 box4"><img src="gg3.jpg" style="width: 100%; height: 200px;" alt="maidanglao" title="maidanglao"></div></li>
        <li><div class="box1 box5"><img src="gg4.jpg" style="width: 100%; height: 200px;" alt="maidanglao" title="maidanglao"></div></li>
    </ul>
</div>
<div id="Layer1" class="layer11"><p>菜单</p></div>

<script>
    var aLi = document.querySelectorAll(".box li");
    var box = document.querySelector('.box');
    var wrap = document.querySelector('.wrap');
    var aLiWidth = box.offsetWidth;
    console.log('aLiWidth: ' + aLiWidth)
    wrap.style.height = 200 + 'px';
    wrap.style.width = 80 + '%';
    // 设置盒子的宽度
    box.style.width = aLi.length*100 + '%';
    for(var i=0;i<aLi.length;i++){
        aLi[i].style.width = 1/aLi.length * 100 + '%';
    };
    // 初始化手指坐标点
    var startPoint = 0;
    var startEle = 0;
    //手指按下
    wrap.addEventListener("touchstart",function(e){
        startPoint = e.changedTouches[0].pageX;
        startEle = box.offsetLeft;
    });
    //手指滑动
    wrap.addEventListener("touchmove",function(e){
        var currPoint = e.changedTouches[0].pageX;
        var disX = currPoint - startPoint;
        var left = startEle + disX;
        box.style.left = left + 'px';
    });
    //当手指抬起的时候，判断图片滚动离左右的距离，当
    wrap.addEventListener("touchend",function(e){
        var left = box.offsetLeft;
// 判断正在滚动的图片距离左右图片的远近，以及是否为最后一张或者第一张
        var currNum = Math.round(-left/aLiWidth);
        currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;
        currNum = currNum<=0 ? 0 : currNum;
        box.style.left = -currNum*wrap.offsetWidth + 'px';
    })

</script>

         
           
       
           <div class="neirong" id="dd">
               <div id="show"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/7ZFKa7ualxY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
               <div><img src="mc2.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc3.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc4.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc5.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc6.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc7.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc8.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc9.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc10.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc11.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc12.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
               <div><img src="mc13.jpg" style="width: 100%; height: 100%;" alt="maidanglao" title="maidanglao">
      </div>
            </div>
         

  
           
            <div class="title" id="Layer2"style="display:none" >
               <ul class="title_1">
                <div class="lili" id="gold">
                  <li class="li1">
                   
                
                    <a class="li11" href="#" ><h5>麦趣鸡盒</h5></a>
                    
                </li> 
                
               </div>
                
                  <li class="li1">
                    <div class="lili">
                    <a class="li11" href="#"><h5>巨无霸</h5></a>
                    </div>
                </li> 
                
                
                  <li class="li1">

                     <div class="lili">
                    <a class="li11"  href="#"><h5>麦辣鸡腿汉堡套餐</h5></a>
                    </div>
                </li> 
                
                  <li class="li1">
                     <div class="lili">
                    <a  class="li11" href="#"><h5>巨无霸超值套餐</h5></a>
                    </div>
                </li> 
                
                  <li class="li1">
                     <div class="lili">
                    <a  class="li11" href="#"><h5>大薯条</h5></a>
                    </div>
                </li>
                  <li class="li1">
                     <div class="lili">
                    <a  class="li11" href="#"><h5>麦旋风奥利奥口味</h5></a>
                    </div>
                </li> 
                
                
                  <li class="li1">
                     <div class="lili">
                    <a  class="li11" href="#"><h5>双层吉士汉堡包</h5></a>
                    </div>
                </li> 
                
                  <li class="li1">
                     <div class="lili">
                    <a  class="li11" href="#"><h5>原味板烧鸡腿堡套餐</h5></a>
                    </div>
                </li> 
                
                  <li class="li1">
                     <div class="lili">
                    <a  class="li11" href="#"><h5>麦辣鸡翅</h5></a>
                    </div>
                </li>
                
                  <li class="li1">
                     <div class="lili">
                    <a class="li11"  href="#"><h5>早晨全餐</h5></a>
                    </div>
                </li> 
                
                
                  <li class="li1">
                     <div class="lili">
                    <a  class="li11" href="#"><h5>原味特级板烧鸡腿堡</h5></a>
                    </div>
                </li> 
                
                  <li class="li1"> 
                     <div class="lili">
                    <a  class="li11" href="#"><h5>汉堡包</h5></a>
                    </div>
                </li> 
                
                  <li class="li1">
                     <div class="lili">
                    <a class="li11"  href="#"><h5>麦辣鸡腿汉堡</h5></a>
                    </div>
                </li>
                
                




               </ul>
               </div>
       

</body>

</html>
